<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>内容管理中心-首页配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

</head>

<body>
    <div class="layui-fluid" style="background-color:white;padding:5px;">
        <div class="layui-card-header layui-form layuiadmin-card-header-auto" style="padding:5px 0 0 0;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">站点：</label>
                    <div class="layui-input-inline">
                        <select lay-filter="WebSiteId" name="WebSiteId"></select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="preview-submit">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>预览
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="datatable" lay-filter="datatable"></table>
        </div>
    </div>
</body>

</html>
<script type="text/html" id="status">
    {{# if(d.DelFlag ==1) { }}
    <span style="color:orangered">已停用</span>
    {{# } else {}}
    <span style="color:cadetblue"> 已启用</span>
    {{# }}}
</script>
<script type="text/html" id="baradd">
    <a class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
</script>
<script type="text/html" id="operation">
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
{{# if(d.DelFlag==0){ }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="enstatus"><i
        class="layui-icon layui-extend-stop"></i>停用</a>
{{# } else { }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enstatus"><i class="layui-icon layui-icon-ok"></i>启用</a>
{{# } }}
</script>
<script>
    lobsterlayui.main(['index', 'layer', 'form', 'element', 'table'],{
            data: {
                $layui: null,
                tableins: 0,//表格
                layoutlist: [{
                    Code: 0, Name: '文本'
                }, {
                    Code: 1, Name: '左文右图'
                }, {
                    Code: 2, Name: '左图右文'
                }, {
                    Code: 3, Name: '上图下文'
                }, {
                    Code: 4, Name: '上文下图'
                }],
                urltypelist: [{
                    Code: 1, Name: '列表页'
                }, {
                    Code: 2, Name: '详情页'
                }, {
                    Code: 3, Name: '外部链接'
                }],
                model: {},
            },
            pageload: function (right) {
                var self = this;
                var appendHtml = '';
                self.getWebSiteData().then(res => {
                    res.data.forEach((x, index) => {
                        if (index == 0)
                            appendHtml += '<option  value="' + x.WebSiteId + '" selected>' + x.Title + '</option>'
                        else
                            appendHtml += '<option  value="' + x.WebSiteId + '">' + x.Title + '</option>'
                    })
                    $("[name='WebSiteId']").html(appendHtml);
                    layui.form.render("select");
                    self.listLoad();
                })
                self.pageEvent();
            },
            //获取站点
            getWebSiteData: function () {
                var self = this;
                return new Promise((resolve, reject) => {
                    lobsterlayui.GETAPI('tsAdmin.getWebSiteListData').then(retdata=>{
                        resolve(retdata);
                    }).catch(res=>{
                        reject(res);
                    })
                });
            },
            //加载列表数据
            listLoad: function () {
                var self = this;
                var websiteId = $("[name='WebSiteId']").val();
                self.data.tableins = layui.table.render({
                    elem: "#datatable",
                    headers: lobsterlayui.GetHeaderData(),
                    where: {
                        websiteId: websiteId
                    },
                    toolbar: '#baradd',
                    url: lobsterlayui.GetLowCodeUrl('tsAdmin.getIndexSetting'),
                    height: 'full-105',
                    size: '100',
                    // page: true, //开启分页
                    cols: [[
                        { field: 'Id', title: '模块Id', align: 'left', width: '80' },
                        { field: 'Title', title: '标题', align: 'left', width: '120' },
                        { field: 'Title_en', title: '英文标题', align: 'left', width: '120' },
                        { field: 'Desc', title: '描述', align: 'left', width: '200' },
                        {
                            field: 'Layout', title: '布局', align: 'left', width: '100', templet: function (d) {
                                var filter = self.data.layoutlist.filter(a => { return a.Code == d.Layout });
                                if (filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return "";
                            }
                        },
                        {
                            field: 'TextBackgroundColor', title: '文本背景色', align: 'left', width: '100', templet: function (d) {
                                return "<div style='width:70px;height:40px;background-color:" + d.TextBackgroundColor + "'></div>";
                            }
                        },
                        { field: 'TextWidth', title: '文本宽度', align: 'left', width: '100' },
                        { field: 'TotalWidth', title: '总宽度', align: 'left', width: '80' },
                        {
                            field: 'BackImage', title: '背景图', align: 'left', width: '100', templet: function (d) {
                                return "<image src='" + d.BackImage + "'/>";
                            }
                        },
                        { field: 'Url', title: '跳转链接', align: 'left', width: '180' },
                        {
                            field: 'UrlType', title: '链接类型', align: 'left', width: '120', templet: function (d) {
                                var filter = self.data.urltypelist.filter(a => { return a.Code == d.UrlType });
                                if (filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return "";
                            }
                        },
                        { field: 'UrlParamValue', title: '参数值', align: 'left', width: '80' },
                        { field: 'WebSiteTitle', title: '站点名称', align: 'left', width: '80' },
                        { field: 'Sort', title: '排序', align: 'left', width: '80' },
                        { field: '', title: '状态', align: 'left', width: 100, templet: "#status" },
                        { title: '操作', toolbar: '#operation', width: '250', fixed: 'right' }
                    ]],
                    parseData: function (res) {
                        return {
                            code: res.code,
                            msg: res.msg,
                            count: res.data.count,
                            data: res.data.data
                        }
                    }
                });
            },

            //监听事件
            pageEvent: function () {
                var self = this;
                //预览
                layui.form.on("submit(preview-submit)", function (obj) {
                    layer.open({
                        type: 2
                        , title: '预览站点'
                        //, btn: ['保存', '取消']
                        , content: "/weuiapp/"+lobsterlayui.GetAppId()+"/template/v1/index.html?websiteId="+obj.field.WebSiteId+"&workId="+lobsterlayui.GetWorkId()
                        , area: ['480px', '640px']  //宽，高
                        , success: function (layero, index) {
                        
                        }
                        , cancel: function (index, layero) {
                            
                        }
                        , yes: function (index, layero) {
                            
                        }
                    });
                });
                layui.form.on('select(WebSiteId)', function (data) {
                    self.listLoad();
                });

                // 监听表头工具栏
                layui.table.on("toolbar(datatable)", function (obj) {
                    if (obj.event == "add") {
                        window.layoutlist = self.data.layoutlist;
                        window.urltypelist = self.data.urltypelist;
                        window.model={
                            WebSiteId:$("[name='WebSiteId']").val()
                        }
                        self.add();
                    }
                });
                //监听按钮事件
                layui.table.on('tool(datatable)', function (obj) {
                    var data = obj.data;//当前行数据
                    var layEvent = obj.event;//获得lay-event的值
                    switch (layEvent) {
                        case 'edit':
                            window.layoutlist = self.data.layoutlist;
                            window.urltypelist = self.data.urltypelist;
                            window.model=data;
                            self.edit(data);
                            break;
                        case 'enstatus':
                            self.setStatus(data);
                            break;
                    }

                });
            },

            /**
             * 编辑
             * @param {any} data
             */
            edit: function (data) {
                var self = this;
                layer.open({
                    type: 2
                    , title: '编辑站点'
                    , btn: ['保存', '取消']
                    , content: 'indexsettingadd.html?appid='+lobsterlayui.GetAppId()
                    , area: ['70%', '90%']  //宽，高
                    , success: function (layero, index) {
                       
                    }
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {
                        var a = getResult()
                        if (a != null) {
                            self.data.model = a;
                            layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                            self.save(() => {
                                self.listLoad();
                                layer.close(index);
                            })
                        }
                    }
                });
            },

            /**
             * 添加
             * */
            add: function () {
                var self = this;
                layer.open({
                    type: 2
                    , title: '新增站点'
                    , btn: ['保存', '取消']
                    , content: 'indexsettingadd.html?appid='+lobsterlayui.GetAppId()
                    , area: ['70%', '90%']  //宽，高
                    , cancel: function (index, layero) {
                        layer.close(index);
                    }
                    , yes: function (index, layero) {
                        var a = getResult()
                        if (a != null) {
                            self.data.model = a;
                            layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                            self.save(() => {
                                self.listLoad();
                                layer.close(index);
                            })
                        }
                    }
                });
            },

            /**
             * 启用停用
             * @param {any} data
             */
            setStatus: function (data) {
                var self = this;
                var confirm_msg = "";
                var status = 0;
                if (data.DelFlag == 0) {
                    confirm_msg = "确定停用?";
                    status = 1;
                }
                else {
                    confirm_msg = "确认启用?";
                    status = 0;
                }
                layer.confirm(confirm_msg, { icon: 3, title: "提示" },
                    function (index) {
                        lobsterlayui.GETAPI('tsAdmin.setsettingstatus',{id: data.Id,delflag: status}).then(retdata=>{
                            layer.msg("操作成功");
                            self.listLoad();
                        })
                    });
            },
            //保存
            save: function (succ) {
                var self = this;
                lobsterlayui.POSTAPI('tsAdmin.saveindexsetting',self.data.model).then(retdata=>{
                    succ && succ();
                    layer.msg("保存成功!")
                })
            }

        }
    );
</script>